﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery多张提交表单验证特效</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.form label, .form input, .form select, .form textarea, .form button, .form .label{float:left;font-size:12px;}
.fl{float:left;}.fr{float:right;}.fn{float:none;}
.hide{display:none;}.invisible{visibility:hidden;}.overflow{overflow:hidden;}
.clear{display:block;clear:both;height:0;overflow:hidden;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}
/* yellow_button */
.yellow_button{background:url(images/yellow_button.png);border:none;cursor:pointer;height:36px;line-height:36px; overflow:hidden; display:inline-block; text-align:center; font-size:14px; font-weight:800; color:#fff;background-position:0 0;width:139px;}
#registsubmit.disabled{background-position:0 -36px;cursor:default!important;}
.red{color:#ff0000;font-family:"宋体";font-weight:normal;}
/* formbox */
#formbox{padding:20px;border:solid 1px #D1D1D1;margin:20px auto;width:880px;}
#formbox h3{font-size:16px;height:32px;color:#3366cc;font-weight:800;border-bottom:solid 1px #D1D1D1;margin:0 0 20px 0;padding:0 10px;}
#formbox .item{padding-top:5px;height:50px;overflow:hidden;line-height:26px;}
#formbox .item a:link,#formbox .item a:visited{text-decoration:underline;}
#formbox .label{width:300px;text-align:right;font-size:14px;}
#formbox .span-150{width:150px;}
#formbox .text{width:240px;height:16px;padding:4px 3px;border:1px solid #bbb;font-size:14px;font-family:arial,"宋体";}
#formbox .text-1{width:100px;}
#formbox .blank{width:16px;height:16px;margin:2px 5px 0;}
#formbox .img img{height:26px;margin:0 5px;}
#formbox .succeed{background:url(images/pwdstrength.gif) no-repeat -105px 0;}
#formbox .yellow_button{font-size:14px;font-weight:bold;color:#fff;border:none;cursor:pointer;}
#formbox .highlight1{border:1px solid #EFA100;outline:2px solid #FFDC97;*border:2px solid #ffcc66;*padding:3px 2px;}
#formbox .highlight2{border:1px solid #f00;outline:1px solid #FFC1C1;color:#f00;}
#formbox .pwdbg{background:#FFF8EB;}
#formbox .focus{color:#999;line-height:22px;*line-height:20px;}
#formbox .null,#formbox .error{color:red;line-height:22px;*line-height:20px;}
#formbox .checkbox{margin-top:6px;*margin-top:2px;}
#formbox #referrer{color:#999;font-size:12px;}
#formbox #protocol{margin:0px 5px 0 0;display:inline;}
#pwdstrength{color:#999;line-height:22px;padding-right:10px;}
#pwdstrength b{float:left;width:104px;height:13px;overflow:hidden;margin-top:5px;*margin-top:3px;}
.strengthA b{background:url(images/pwdstrength.gif) no-repeat 0 0;}
.strengthB b{background:url(images/pwdstrength.gif) no-repeat 0 -13px;}
.strengthC b{background:url(images/pwdstrength.gif) no-repeat 0 -26px;}
</style>

<div id="formbox">
	<form id="formpersonal" method="post" onsubmit="return false;">
	<div class="form">
		<h3>帐户信息</h3>
		<div class="item">
			<span class="label"><span class="red">*</span>用户名：</span>
			<div class="fl">
				<input type="text" id="username" name="username" class="text" tabindex="1" />
				<label id="username_succeed" class="blank"></label>
				<span class="clear"></span>
				<div id="username_error"></div>
			</div>
		</div><!--item end-->
		
		<div id="o-password">
			<div class="item">
				<span class="label"><span class="red">*</span>设置密码：</span>
				<div class="fl">
					<input type="password" id="pwd" name="pwd" class="text" tabindex="2"/>
					<label id="pwd_succeed" class="blank"></label>
					<input type="checkbox" class="checkbox" id="viewpwd"/>
					<label class="ftx23" for="viewpwd">显示密码字符</label>
					<span class="clear"></span>
					<label class="hide" id="pwdstrength"><span class="fl">安全程度：</span><b></b></label>
					<label id="pwd_error"></label>
				</div>
			</div><!--item end-->
			
			<div class="item">
				<span class="label"><span class="red">*</span>确认密码：</span>
				<div class="fl">
					<input type="password" id="pwd2" name="pwd2" class="text" tabindex="3"/>
					<label id="pwd2_succeed" class="blank"></label>
					<span class="clear"></span>
					<label id="pwd2_error"></label>
				</div>
			</div><!--item end-->
			
		</div><!--o-password end-->
		
		<div class="item">
			<span class="label"><span class="red">*</span>邮箱：</span>
			<div class="fl">
				<input type="text" id="mail" name="mail" class="text" tabindex="4"/>
				<label id="mail_succeed" class="blank"></label>
				<span class="clear"></span>
				<div id="mail_error"></div>
			</div>
		</div><!--item end-->
		
		<div class="item">
			<span class="label">推荐人用户名：</span>
			<div class="fl">
				<input type="text" id="referrer" name="referrer" class="text" value=可不填 tabindex="5" />
				<label id="referrer_succeed" class="blank invisible"></label>
				<span class="clear"></span>
				<label id="referrer_error"></label>
			</div>
		</div><!--item end-->
		
		<div class="item">
			<span class="label"><span class="red">*</span>验证码：</span>
			<div class="fl">
				<input type="text" id="authcode" name="authcode" class="text text-1" autocomplete="off" MaxLength="6" tabindex="6" />
				<label class="img"><img id="JD_Verification1" Ver_ColorOfNoisePoint="#888888" src="http://www.mailuke.com/Inc/Code/adminCode.php?sesstr=regCode" onClick="chanageCode('regCode')" alt="" style="cursor:pointer;width:100px;height:26px;"/>
				</label>
				<label>&nbsp;看不清？点击验证码图片更换</label>
				<label id="authcode_succeed" class="blank invisible"></label>
				<span class="clear"></span>
				<label id="authcode_error"></label>
			</div>
		</div><!--item end-->
	
		<h3>联系人信息</h3>
		<div class="item">
			<span class="label"><span class="red">*</span>联系人姓名：</span>
			<div class="fl">
				<input type="text" id="realname" name="realname" class="text" tabindex="7"/>
				<label id="realname_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="realname_error"></label>
			</div>
		</div><!--item end-->
		
		<div class="item">
			<span class="label"><span class="red">*</span>所在部门：</span>
			<div class="fl">
				<select rel="select" id="department" name="department" tabindex="8">
					<option value="-1">请选择</option>
					<option value="1">办公室</option>
					<option value="2">市场部</option>
					<option value="3">采购部</option>
					<option value="4">技术部</option>
					<option value="5">人力资源</option>
					<option value="6">其他</option>
				</select>
				<label id="department_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="department_error"></label>
			</div>
		</div><!--item end-->
		
		<div class="item">
			<span class="label"><span class="red">*</span>固定电话：</span>
			<div class="fl">
				<input type="text" id="tel" name="tel" class="text" value="" tabindex="9" />
				<label id="tel_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="tel_error"></label>
			</div>
		</div><!--item end-->
		
		<div class="item">
			<span class="label"><span class="red">*</span>手机：</span>
			<div class="fl">
				<input type="text" id="mobile" name="mobile" class="text" value="" tabindex="10" />
				<label id="mobile_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="mobile_error"></label>
			</div>
		</div><!--item end-->
	
		<h3>公司信息</h3>
		<div class="item">
			<span class="label"><span class="red">*</span>公司名称：</span>
			<div class="fl">
				<input type="text" id="companyname" name="companyname" class="text" tabindex="11"/>
				<label id="companyname_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="companyname_error"></label>
			</div>
		</div><!--item end-->
		
		<div class="item">
			<span class="label"><span class="red">*</span>公司地址：</span>
			<div class="fl">
				<input type="text" id="companyaddr" name="companyaddr" class="text" tabindex="12" />
				<label id="companyaddr_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="companyaddr_error"></label>
			</div>
		</div><!--item end-->
		
		<div class="item">
			<span class="label"><span class="red">*</span>购买类型/用途：</span>
			<div class="fl">
				<input id="purpose1" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="1" />
				<label class="pad" for="purpose1">IT设备</label>
				<input id="purpose2" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="2" />
				<label class="pad" for="purpose2">数码通讯</label>
				<input id="purpose3" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="3" />
				<label class="pad" for="purpose3">办公用品耗材</label>
				<input id="purpose4" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="4" />
				<label class="pad" for="purpose4">大家电</label>
				<input id="purpose5" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="5" />
				<label class="pad" for="purpose5">项目合作-政府采购</label>
				<input id="purpose6" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="6" />
				<label class="pad" for="purpose6">礼品</label>
				<input id="purpose" type="hidden" value="" />
				<label id="purpose_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="purpose_error"></label>
			</div>
		</div><!--item end-->
		
		<div class="item">
			<span class="label"><span class="red">*</span>公司网址：</span>
			<div class="fl">
				<input type="text" id="companysite" name="companysite" class="text" tabindex="14"/>
				<label id="companysite_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="companysite_error"></label>
			</div>
		</div><!--item end-->
	
		<div class="item">
			<span class="label">&nbsp;</span>
			<div class="fl">
				<input type="checkbox" name="protocol" id="protocol" tabindex="7" /><label for="protocol">网站用户注册协议</label>
			</div>
		</div><!--item end-->
		
		<div class="item">
			<span class="label">&nbsp;</span>
			<input type="button" class="yellow_button disabled" id="registsubmit" value="提交注册信息" tabindex="8" disabled="disabled" />
		</div><!--item end-->
	</div>
	</form>
</div><!--formbox end-->
<script type="text/javascript" src="js/Validate.js"></script>
<script type="text/javascript" src="js/Validate.form.js"></script>

</body>
</html>